<template>
    <div v-loading="edit.loading">
        <div class="bold f22 mb20">{{orderService.orderStatus[order.order_status]?.title}}</div>
<!--        步骤条-->
        <div class="mb20">
            <order-steps :order="order" />
        </div>
        <el-space class="mb20">
            <el-button type="primary" v-if="['paid','wait'].includes(order.order_status)" @click="cancelHandle">取消订单并退款</el-button>
            <el-button type="primary" v-if="order.order_status=='unpaid'" @click="cancelHandle">取消订单</el-button>
        </el-space>

        <div class="mb20">
            <div class="f16 bold f_primary mb15">订单信息</div>
            <div class="bg_f9 p15 radius">
                <div class="d_flex mr10">
                    <div class="flex_1">
                        <mi-li label="订单号">{{order.order_no}}</mi-li>
                        <mi-li label="订单类型">{{orderService.orderType[order.order_type]?.title}}</mi-li>
                        <mi-li label="下单时间">{{order.create_time}}</mi-li>
                        <mi-li label="配送地址" v-if="order.userAddress">
                            <div>{{order.userAddress.contact}} {{order.userAddress.mobile}}
                                {{order.userAddress.area_title}} {{order.userAddress.address}}</div>
                        </mi-li>
                        <mi-li label="买家留言">{{order.user_note}}</mi-li>
                    </div>
                    <div class="flex_1">
                        <mi-li label="付款方式">{{orderService.payType[order.pay_type]?.title}}</mi-li>
                        <mi-li label="付款时间">{{order.payTime}}</mi-li>
                        <mi-li label="付款单号">{{order.pay_order_no}}</mi-li>
                    </div>
                </div>
                <el-divider/>
                <div class="d_flex flex_jc_end">
                    <mi-li label="订单金额">{{order.total_price}}</mi-li>
                    <mi-li label="运费">{{order.postage_price}}</mi-li>
                    <mi-li label="优惠券">{{order.coupon_price}}</mi-li>
                    <mi-li label="积分抵扣">{{order.points_price}}</mi-li>
                    <mi-li label="支付金额">
                        <div class="f_danger">{{order.pay_price}}</div>
                    </mi-li>
                </div>
            </div>

        </div>

        <div class="mb20">
            <div class="f16 bold f_primary mb15">买家信息</div>
            <div v-if="order.user" class="d_flex">
                <el-avatar :src="order.user.avatar" class="mr10" />
                <div>
                    <div>{{order.user.nickname}}</div>
                    <div>{{order.user.mobile}}</div>
                </div>
            </div>
            <div v-else class="f_secondary">买家信息不存在</div>
        </div>

        <div class="mb20"  v-if="order.deliveryOrders?.length>0">
            <div class="f16 bold f_primary mb15">物流信息</div>
            <el-tabs :model-value="0">
                <el-tab-pane :label="vo.express_title" :name="i"  v-for="(vo,i) in order.deliveryOrders">
                    <mi-li label="快递公司">{{vo.express_title}}</mi-li>
                    <mi-li label="快递单号">{{vo.express_order_no}}</mi-li>
<!--                    发货单商品信息 -->
                    <el-col :span="8" v-for="(vi,j) in order.deliveryItems" >
                        <div v-if="vi.delivery_order_id == vo.id" class="d_flex">
                            <mi-image-v2 :size="40" :src="vi.goods_image" class="mr10" />
                            <div>
                                <div>{{vi.goods_title}}</div>
                                <div class="d_flex flex_jc_sb">
                                    <div>{{vi.goods_sku}}</div>
                                    <div class="f12 f_secondary">x{{vi.num}}</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <!--                    发货单商品信息end-->
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="mb20">
            <div class="f16 bold f_primary mb15">商品信息</div>
            <order-items :items="order.items"   />
        </div>

        <div class="mb20" v-if="order.refunds?.length>0" >
            <div class="f16 bold f_primary mb15">售后信息</div>
            <refund-items :items="order.refunds"  />
        </div>

    </div>

</template>

<script setup lang="ts">

import {computed, onBeforeMount, onMounted, reactive, ref} from "vue";
import Edit from "@/model/edit";
import OrderItems from "@/views/store/components/Order/Detail/OrderItems.vue";
import orderService from "@/service/order";
import OrderSteps from "@/views/store/components/Order/Detail/OrderSteps.vue";
import {simpleGet, simplePost} from "@/utils/request";
import {msgSuccess} from "@/utils/alert";
import RefundItems from "@/views/store/components/Order/Detail/RefundItems.vue";


const props = withDefaults(defineProps<{
    id?: number,
}>(),{
    id: 0
})

const edit = reactive(new Edit({
    loading:true
}))

const order = computed(() => {
    return edit.info
})

const cancelHandle = (action:string) => {
    simplePost(`/store.order/cancel`, {order_id:edit.info.id}).then(r => {
        edit.info.order_status = 'close'
        msgSuccess("订单已取消")
    })
}

onBeforeMount(() => {
    edit.init(async () => {
        edit.info = await orderService.find(props.id)
    })
})



</script>

<style scoped>

</style>
